<template>
  <div>
    <div class="rowFlex" v-if="!option.isTable">
      <label for="" style="flex: 0 0 80px;text-align:center;">{{
        item.label
      }}</label>
      <div style="flex: 1">
          <a-input v-if="item.type === 'input'"></a-input>
          <a-input-search enter-button v-if="item.type === 'search'" />
          <a-input-search v-if="item.type === 'sync'">
            <a-button slot="enterButton" icon="sync">
            </a-button>
          </a-input-search>
          <a-input-search v-if="item.type === 'calculate'">
            <a-button slot="enterButton" icon="calculator">
            </a-button>
          </a-input-search>
          <div v-if="item.type === 'select'" style="display:flex;">
            <a-select style="flex: 1"></a-select>
            <a-button v-if="item.isPopup" icon="file-sync" type="primary"></a-button>
          </div>
          <a-select v-if="item.type === 'cascader'" style="width: 100%"></a-select>
          <a-date-picker v-if="item.type === 'datepicker'" style="width: 100%"></a-date-picker>
          <a-upload v-if="item.type === 'upload'">
            <a-button> <a-icon type="upload" /> 文件上传 </a-button>
          </a-upload>
          <div v-if="item.type === 'autoComplete'">
            <a-auto-complete></a-auto-complete>
            <a-button icon="search" type="primary"></a-button>
          </div>
          <a-textarea v-if="item.type === 'textarea'"></a-textarea>
      </div>
      <span v-if="selected">
        <a-button type="link" @click.stop="cloneItem">复制</a-button>
        <a-button type="link" @click.stop="removeItem">移除</a-button>
      </span>
    </div>
    <div class="column" v-else>
      <h5>
        {{ item.label }}
        <a-button type="link" icon="minus-circle" @click.stop="removeItem"></a-button>
      </h5>
      <section>
        <a-input v-if="item.type === 'input'"></a-input>
        <a-select v-if="item.type === 'select'" style="width: 100%"></a-select>
        <a-input-search enter-button v-if="item.type === 'search'" />
        <a-date-picker v-if="item.type === 'datepicker'" />
      </section>
    </div>
  </div>
</template>

<script>
export default {
  props: ['item', 'selected', 'option'],
  name: 'optionItem',
  methods: {
    cloneItem() {
      this.$emit('cloneItem');
    },
    removeItem() {
      this.$emit('removeItem');
    }
  }
};
</script>
<style lang="less" scoped>
.rowFlex {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.5rem 0;
}
.column {
  text-align: center;
  border: 1px solid lightgray;
}
</style>
